import { InputDemos, HooksDemos, TableOfContentsDemos, PopoverDemos, CarouselDemos, PaginationDemos, SliderDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Changelog7160);

## use-scroll-spy hook

New [use-scroll-spy](/hooks/use-scroll-spy) hook tracks scroll position and returns index of the
element that is currently in the viewport. It is useful for creating
table of contents components (like in mantine.dev sidebar on the right side)
and similar features.

<Demo data={HooksDemos.useScrollSpyUsage} />

## TableOfContents component

New [TableOfContents](/core/table-of-contents) component is built on top of `use-scroll-spy` hook
and can be used to create table of contents components like the one on the right side of mantine.dev
documentation sidebar:

<Demo data={TableOfContentsDemos.usage} />

## Input.ClearButton component

New `Input.ClearButton` component can be used to add clear button to custom inputs
based on `Input` component. `size` of the clear button is automatically
inherited from the input:

<Demo data={InputDemos.clearButton} />

## Popover with overlay

[Popover](/core/popover) and other components based on it now support `withOverlay` prop:

<Demo data={PopoverDemos.overlay} />

## Container queries in Carousel

You can now use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)
in [Carousel](/x/carousel) component. With container queries, all responsive values
are adjusted based on the container width, not the viewport width.

Example of using container queries. To see how the grid changes, resize the root element
of the demo with the resize handle located at the bottom right corner of the demo:

<Demo data={CarouselDemos.container} />

## RangeSlider restrictToMarks

[RangeSlider](/core/range-slider) component now supports `restrictToMarks` prop:

<Demo data={SliderDemos.restrictToMarks} />

## Pagination withPages prop

[Pagination](/core/pagination) component now supports `withPages` prop which allows hiding pages
controls and displaying only previous and next buttons:

<Demo data={PaginationDemos.withPages} />

## useForm touchTrigger option

[use-form](/form/use-form) hook now supports `touchTrigger` option that allows customizing events that change touched state.
It accepts two options:

- `change` (default) – field will be considered touched when its value changes or it has been focused
- `focus` – field will be considered touched only when it has been focused

Example of using `focus` trigger:

```tsx
import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { a: 1 },
  touchTrigger: 'focus',
});

form.isTouched('a'); // -> false
form.setFieldValue('a', 2);
form.isTouched('a'); // -> false

// onFocus is called automatically when the user focuses the field
form.getInputProps('a').onFocus();
form.isTouched('a'); // -> true
```

## Help Center updates

- [Native browser validation does not work in some components, what should I do?](https://help.mantine.dev/q/native-required) question
- [My styles are broken with disabled JavaScript. What should I do?](https://help.mantine.dev/q/disabled-js) question
- [How can I add fuzzy search to Select component?](https://help.mantine.dev/q/select-fuzzy) question
- [use-local-storage hook returns real value only after mounting, is it a bug?](https://help.mantine.dev/q/local-storage-effect) question
- [How can I upload files from Dropzone component?](https://help.mantine.dev/q/dropzone-upload) question

## Other changes

- [Autocomplete](/core/autocomplete) now supports `clearable` prop
- [where-* mixins](/styles/postcss-preset/#where--mixins) documentation has been added
- [use-local-storage](/hooks/use-local-storage) hook now supports `sync` option which allows disabling synchronization between browser tabs
